<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>焦点管理</title>
</head>
<body>
</body>
<script>
  /** 1. HTML5 增加了辅助 DOM 焦点管理的功能。首先是 document.activeElement，始终包含当前拥有焦点的 DOM 元素。页面加载时，可以通过用户输入（按 Tab 键或
   *     代码中使用 focus()方法）让某个元素自动获得焦点。
   *  2. 默认情况下，document.activeElement 在页面刚加载完之后会设置为 document.body。而在页面完全加载之前，document.activeElement 的值为 null。
   *  3. 其次是 document.hasFocus()方法，该方法返回布尔值，表示文档是否拥有焦点
   *  4. 确定文档是否获得了焦点，就可以帮助确定用户是否在操作页面。
   *  5. 第一个方法可以用来查询文档，确定哪个元素拥有焦点，第二个方法可以查询文档是否获得了焦点，而这对于保证 Web 应用程序的无障碍使用是非常重要的。
   * **/
  // 验证在页面未完全加载之前获取焦点元素
  console.log(document.activeElement);// bodyElement
  window.onload = function(){
    // 验证页面完全加载之后获取焦点元素
    console.log(document.activeElement);// bodyElement
  }
  console.log(document.hasFocus());// true
  
</script>
</html>